<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #menu {
            position: absolute;
            width: 100%;
            bottom: 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="menu">
        <img src="./image/1.webp" alt="">
        <img src="./image/2.webp" alt="">
        <img src="./image/3.webp" alt="">
        <img src="./image/4.webp" alt="">
        <img src="./image/5.gif" alt="">
        <img src="./image/6.webp" alt="">
        <img src="./image/7.webp" alt="">
        <img src="./image/8.webp" alt="">
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var oMenu = document.getElementById("menu");
        var aImg = oMenu.getElementsByTagName("img");

        // 存储图片的初始宽度
        var aWidth = [];
        for (let i = 0; i < aImg.length; i++) {
            aWidth.push(aImg[i].offsetWidth);
            aImg[i].style.width = parseInt(aImg[i].offsetWidth / 2) + "px";
        }

        // 鼠标移动事件
        document.onmousemove = function (event) {
            var event = event || window.event;
            for (let i = 0; i < aImg.length; i++) {
                
                var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
                var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;

                var iScale = 1 - Math.sqrt(a * a + b * b) / 300;

                if (iScale < 0.5) iScale = 0.5;


                aImg[i].style.width = aWidth[i] * iScale + "px";
            }
        }
    }
</script>

</html>